{% extends "cms/cms_base.html" %}
{% from "common/macros.html" import static %}

{% block title %}
    轮播图管理页面
{% endblock %}

{% block head %}
    <link rel="stylesheet" href="{{ static("cms/css/banners.css") }}">
    <script src="{{ static("cms/js/banners.js") }}"></script>
    <script src="{{ static('common/zlqiniu.js') }}"></script>

{% endblock %}

{% block page_title %}
    {{ self.title() }}
{% endblock %}

{% block main_context %}
    <div class="top-box ">
        <button class="btn btn-warning" data-toggle="modal" id="add-banner-btn">添加轮播图</button>
    </div>

    <table class="table table-bordered">
        <tr>
            <th>名称</th>
            <th>图片链接</th>
            <th>跳转链接</th>
            <th>优先级</th>
            <th>创建时间</th>
            <th>操作</th>
        </tr>
        <tbody>
        {% for banner in banners %}
            <tr data-name="{{ banner.name }}" data-image="{{ banner.image_url }}" data-link="{{ banner.link_url }}"
                data-priority="{{ banner.priority }}" data-id="{{ banner.id }}">
                <td>{{ banner.name }}</td>
                <td><a href="{{ banner.image_url }}" target="_blank">{{ banner.image_url }}</a></td>
                <td><a href="{{ banner.link_url }}" target="_blank">{{ banner.link_url }}</a></td>
                <td>{{ banner.priority }}</td>
                <td>{{ banner.create_time }}</td>
                <td>
                    <button class="btn btn-default btn-xs save-banner-btn">编辑</button>
                    <button class="btn btn-danger btn-xs  delete-banner-btn">删除</button>
                </td>
            </tr>
        {% endfor %}

        </tbody>
    </table>

    <!-- Modal -->
    <!-- Modal -->
    <div class="modal fade" id="bannerModel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">添加轮播图</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal">
                        <div class="form-group">
                            <label class="col-sm-2 control-label">名称:</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" name="name" placeholder="轮播图名称">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">图片:</label>
                            <div class="col-sm-6">
                                <input type="text" class="form-control" name="image_url" placeholder="轮播图图片">
                            </div>
                            <button class="btn btn-primary col-sm-2" id="upload-btn">添加图片</button>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">跳转:</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" name="link_url" placeholder="跳转链接">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">权重:</label>
                            <div class="col-sm-9">
                                <input type="number" class="form-control" name="priority" placeholder="优先级">
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" id="save-banner-btn" class="btn btn-primary">保存</button>
                </div>
            </div>
        </div>
    </div>
{% endblock %}